<template>
  <div class="system-monitor">

    <div class="main-container">
      <!-- 顶部导航菜单 - 替代原来的侧边栏 -->
      <el-menu :default-active="activeTab" mode="horizontal" background-color="#ffffff" text-color="#3b82f6"
        active-text-color="#1d4ed8" @select="handleSelect" class="main-menu">
        <el-menu-item v-for="item in menuItems" :key="item.id" :index="item.id">
          <el-icon>
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
        <span style="width: 35%;"></span>
        <div class="header-right">
          <div class="time-display">
            <el-icon>
              <Clock />
            </el-icon>
            <span>{{ currentTime }}</span>
          </div>
          <div class="system-status">
            <div class="status-dot"></div>
            <span>{{ systemRunText }}</span>
          </div>
        </div>
      </el-menu>

      <!-- 主内容区域 -->
      <div class="content-area">
        <!-- 系统概览 -->
        <div v-if="activeTab === 'overview'" class="tab-content">
          <div class="section-header">
            <h2 class="section-title">系统概览</h2>
            <el-button type="primary" @click="refreshData">
              <el-icon>
                <Refresh />
              </el-icon>
              刷新数据
            </el-button>
          </div>

          <!-- 关键指标卡片 -->
          <el-row :gutter="20" class="metric-cards">
            <el-col :xs="24" :sm="12" :md="6" v-for="metric in systemMetrics" :key="metric.title">
              <el-card shadow="hover" class="metric-card">
                <div class="metric-content">
                  <div class="metric-info">
                    <p class="metric-title">{{ metric.title }}</p>
                    <p class="metric-value">{{ metric.value }}</p>
                    <p class="metric-change">{{ metric.change }}</p>
                  </div>
                  <div class="metric-icon" :class="metric.bgColorClass">
                    <el-icon>
                      <component :is="metric.icon" />
                    </el-icon>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>

          <!-- 系统状态图表 -->
          <el-row :gutter="20" class="charts-row">
            <el-col :xs="24" :lg="12">
              <el-card shadow="hover" class="chart-card">
                <template #header>
                  <div class="card-header">
                    <span>CPU使用率</span>
                  </div>
                </template>
                <div class="chart-placeholder">
                  <el-icon class="chart-icon">
                    <Cpu />
                  </el-icon>
                  <p class="chart-text">CPU使用率: {{ cpuUsePrecent + "%" }} </p>
                  <div class="progress-bar">
                    <div class="progress-fill" id="cpu-progress" :style="{ width: cpuUsePrecent + '%' }"></div>
                  </div>
                </div>
              </el-card>
            </el-col>

            <el-col :xs="24" :lg="12">
              <el-card shadow="hover" class="chart-card">
                <template #header>
                  <div class="card-header">
                    <span>内存使用情况</span>
                  </div>
                </template>
                <div class="chart-placeholder">
                  <el-icon class="chart-icon">
                    <DataAnalysis />
                  </el-icon>
                  <p class="chart-text">内存使用: {{ memoryUsed + 'GB/' + memoryTotal + 'GB (' + memoryPrecent }}%)</p>
                  <div class="progress-bar">
                    <div class="progress-fill-memory" id="memory-progress" :style="{ width: memoryPrecent + '%' }">
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20" class="charts-row">
            <el-col :xs="24" :lg="12">
              <el-card shadow="hover" class="chart-card">
                <template #header>
                  <div class="card-header">
                    <span>磁盘使用率</span>
                  </div>
                </template>
                <div class="chart-placeholder">
                  <el-progress type="dashboard" :percentage="diskPrecent" :color="diskHealthColor"
                    :stroke-width="18"></el-progress>
                  <p class="chart-text">磁盘使用情况:{{ diskUsed }}GB/{{ diskTotal }}GB</p>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 系统日志 -->
        <div v-if="activeTab === 'logs'" class="tab-content">
          <div class="section-header">
            <h2 class="section-title">系统关键运行日志</h2>
            <div class="header-actions">
              <el-select v-model="logFilter" placeholder="日志类型" class="log-filter">
                <el-option label="全部日志" value="all"></el-option>
                <el-option label="错误日志" value="error"></el-option>
                <el-option label="警告日志" value="warning"></el-option>
                <el-option label="信息日志" value="info"></el-option>
              </el-select>
              <el-button type="primary" @click="downloadLogs">
                <el-icon>
                  <Download />
                </el-icon>
                下载日志文件
              </el-button>
            </div>
          </div>

          <el-card shadow="hover" class="logs-card">
            <el-table v-if="filteredLogs.length > 0" :data="filteredLogs" style="width: 100%"
              :row-class-name="tableRowClassName">
              <el-table-column width="50">
                <template #default="scope">
                  <div class="log-level-dot" :class="getLevelClass(scope.row.level)"></div>
                </template>
              </el-table-column>
              <el-table-column label="级别" width="100">
                <template #default="scope">
                  <el-tag :type="getTagType(scope.row.level)" size="small">
                    {{ scope.row.level.toUpperCase() }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="message" label="消息"></el-table-column>
              <el-table-column prop="detail" label="详情" show-overflow-tooltip></el-table-column>
              <el-table-column prop="time" label="时间" width="180"></el-table-column>
            </el-table>
            <div v-else>
              <el-empty description="暂无该系统关键日志" />
            </div>
          </el-card>
        </div>

        <!-- 性能分析 -->
        <div v-if="activeTab === 'performance'" class="tab-content">
          <h2 class="section-title">性能分析</h2>

          <el-row :gutter="20">
            <el-col :xs="24" :lg="16">
              <el-card shadow="hover" class="performance-card">
                <template #header>
                  <div class="card-header">
                    <span>响应时间分析</span>
                  </div>
                </template>
                <el-table :data="performanceData" style="width: 100%">
                  <el-table-column prop="path" label="接口路由"></el-table-column>
                  <el-table-column prop="avg_time" label="平均响应时间">
                    <template #default="scope">
                      {{ scope.row.avg_time }}ms
                    </template>
                  </el-table-column>
                  <el-table-column prop="last_time" label="最后一次响应时间">
                    <template #default="scope">
                      {{ scope.row.last_time }}ms
                    </template>
                  </el-table-column>
                  <el-table-column prop="total_count" label="请求次数"></el-table-column>
                  <el-table-column prop="fail_count" label="请求失败次数"></el-table-column>

                </el-table>
              </el-card>
            </el-col>

            <el-col :xs="24" :lg="8">
              <el-card shadow="hover" class="health-card">
                <template #header>
                  <div class="card-header">
                    <span>系统健康度</span>
                  </div>
                </template>
                <div class="health-content">
                  <el-progress type="dashboard" :percentage="availablePercent" :color="healthColor"></el-progress>
                  <p class="health-text">{{ systemRunText }}</p>
                  <div class="health-stats">
                    <div class="stat-item">
                      <span class="stat-label">可用性</span>
                      <span class="stat-value">{{ availablePercent }}%</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-label">错误率</span>
                      <span class="stat-value">{{ 100 - availablePercent }}%</span>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <!-- 系统设置 -->
        <div v-if="activeTab === 'settings'" class="tab-content">
          <h2 class="section-title">系统设置</h2>

          <el-row :gutter="20">
            <el-col :xs="24" :lg="12">
              <el-card shadow="hover" class="settings-card">
                <template #header>
                  <div class="card-header">
                    <span>监控配置</span>
                  </div>
                </template>
                <el-form label-position="top">
                  <el-form-item label="自动刷新间隔">
                    <el-select v-model="autoRefreshInterval" placeholder="请选择">
                      <el-option label="30秒" value='30000'></el-option>
                      <el-option label="1分钟" value='60000'></el-option>
                      <el-option label="5分钟" value='300000'></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="日志保留天数">
                    <el-input-number v-model="logRetention" :min="1" :max="90"
                      @change="handleDaysChange"></el-input-number>
                  </el-form-item>
                  <el-form-item label="启用邮件告警">
                    <el-switch v-model="emailAlerts" active-color="#3b82f6"></el-switch>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>

            <el-col :xs="24" :lg="12">
              <el-card shadow="hover" class="settings-card">
                <template #header>
                  <div class="card-header">
                    <span>告警阈值</span>
                  </div>
                </template>
                <el-form label-position="top">
                  <el-form-item label="CPU使用率告警阈值">
                    <el-slider v-model="cpuThreshold" :format-tooltip="formatThreshold"></el-slider>
                    <div class="threshold-labels">
                      <span>{{ cpuThreshold }}%</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="内存使用率告警阈值">
                    <el-slider v-model="memoryThreshold" :format-tooltip="formatThreshold"></el-slider>
                    <div class="threshold-labels">
                      <span>{{ memoryThreshold }}%</span>
                    </div>
                  </el-form-item>
                  <el-form-item label="磁盘使用率告警阈值">
                    <el-slider v-model="diskThreshold" :format-tooltip="formatThreshold"></el-slider>
                    <div class="threshold-labels">
                      <span>{{ diskThreshold }}%</span>
                    </div>
                  </el-form-item>
                </el-form>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
  <!-- 文件列表弹窗 -->
  <el-dialog v-model="logDialogVisible" title="日志下载" width="600px" :before-close="handleClose">
    <div class="file-list-container">
      <!-- 文件列表头部 -->
      <div class="file-list-header">
        <span class="file-count">共 {{ fileList.length }} 个文件</span>
        <el-button type="primary" size="small" @click="downloadAll" :disabled="fileList.length === 0">
          <el-icon>
            <Download />
          </el-icon>
          全部下载
        </el-button>
      </div>

      <!-- 文件列表 -->
      <div class="file-list" v-if="fileList.length > 0">
        <div v-for="(file, index) in fileList" :key="index" class="file-item">
          <div class="file-info">
            <el-icon class="file-icon">
              <Files />
            </el-icon>
            <div class="file-details">
              <span class="file-name" :title="file.name">{{ file.name }}</span>
              <span class="file-size">{{ formatFileSize(file.size) }}</span>
            </div>
          </div>
          <div class="file-actions">
            <el-button type="primary" size="small" @click="downloadFile(file)" :loading="file.downloading">
              <el-icon>
                <Download />
              </el-icon>
              下载
            </el-button>
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-else class="empty-state">
        <el-icon class="empty-icon">
          <FolderOpened />
        </el-icon>
        <p>暂无文件</p>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="fetchFileList">
          <el-icon>
            <Refresh />
          </el-icon>
          刷新列表
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import {
  DataAnalysis, Clock, Refresh, Download, Cpu,
  User, View, ArrowUp, House, Document, Histogram, Setting, WarningFilled,
  Picture, VideoPlay, Headset, Files, FolderOpened
} from '@element-plus/icons-vue'
import { ElEmpty, ElMessage, ElNotification, ElMessageBox } from 'element-plus'
import apiClient from '@/api/api'
import axios from 'axios'
// 响应式数据
const activeTab = ref('overview')
const currentTime = ref('')
const logFilter = ref('all')
const logRetention = ref(30)
const emailAlerts = ref(true)
const cpuThreshold = ref(80)
const memoryThreshold = ref(80)
const diskThreshold = ref(80)
// 系统资源占有量
const cpuUsePrecent = ref(0)
const memoryUsed = ref(0)
const memoryTotal = ref(0)
const memoryPrecent = ref(0)
const diskPrecent = ref(0)
const diskUsed = ref(0)
const diskTotal = ref(0)
const diskHealthColor = ref("blue")
// 自动刷新时间
const autoRefreshInterval = ref("30000")

// 菜单项
const menuItems = [
  { id: 'overview', name: '系统概览', icon: House },
  { id: 'logs', name: '系统关键日志', icon: Document },
  { id: 'performance', name: '性能分析', icon: Histogram },
  { id: 'settings', name: '系统设置', icon: Setting }
]
// 系统性能相关参数
const availablePercent = ref(100)
const systemThreshold = ref(80)
const systemRunText = computed(() => {
  if (availablePercent.value < systemThreshold.value) {
    document.getElementsByClassName('status-dot').style.backgroundColor = 'red'
    return '系统运行异常'
  }
  return '系统运行正常'
})
// 系统健康度颜色
const healthColor = computed(() => {
  if (availablePercent.value < systemThreshold.value) {
    return 'red'
  }
  return '#3b82f6'
})
// 系统指标数据
const systemMetrics = ref([])

// 日志数据
const systemLogs = ref([])

// 性能数据
const performanceData = ref([])
// 处理日志天数更改
const handleDaysChange = async (val) => {
  const res = await apiClient.post('/monitor/logs', {
    days: logRetention.value
  })
  if (res.data.code === 1) {
    ElMessage.success("日志保留天数修改成功")
  } else {
    ElMessage.error("日志保留天数修改失败")
  }
}
// 计算属性
const filteredLogs = computed(() => {
  if (logFilter.value === 'all') {
    return systemLogs.value
  }
  return systemLogs.value.filter(log => log.level === logFilter.value)
})


// 处理tab更改
const handleSelect = (key) => {
  activeTab.value = key
}

// 时间更新
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}
// 刷新系统数据
const refreshData = () => {
  console.log('刷新系统数据...')
  getSystemBaseInformation()
}
// 导出日志文件
const downloadLogs = () => {
  console.log('导出日志文件...')
  logDialogVisible.value = true
  fecthFileList()
}
// 格式化阈值
const formatThreshold = (val) => {
  return val + '%'
}
// 获取日志级别样式
const getLevelClass = (level) => {
  if (level === 'error') return 'level-error'
  if (level === 'warning') return 'level-warning'
  return 'level-info'
}
// 获取标签类型
const getTagType = (level) => {
  if (level === 'error') return 'danger'
  if (level === 'warning') return 'warning'
  return 'success'
}
// 获取表格行样式
const tableRowClassName = ({ row }) => {
  if (row.level === 'error') return 'error-row'
  if (row.level === 'warning') return 'warning-row'
  return ''
}
// 检查阈值
const checkThreshold = () => {
  // 检查 CPU 使用率是否超过阈值
  if (cpuUsePrecent.value >= cpuThreshold.value) {
    console.log('CPU 使用率超过阈值')
    if (document.getElementById('cpu-progress'))
      document.getElementById('cpu-progress').style.background = 'linear-gradient(90deg, #f1939c,red)';
    ElNotification({
      title: '警告',
      message: 'cpu使用率已达' + cpuUsePrecent.value + '%,超过阈值',
      type: 'warning',
    })
  }
  // 检查内存使用率是否超过阈值
  if (memoryPrecent.value >= memoryThreshold.value) {
    console.log('内存使用率超过阈值')
    if (document.getElementById('memory-progress'))
      document.getElementById('memory-progress').style.background = 'linear-gradient(90deg, #f1939c,red)';
    ElNotification({
      title: '警告',
      message: '内存使用率已达' + memoryPrecent.value + '%,超过阈值',
      type: 'warning',
    })
  }
  // 检查磁盘使用率是否超过阈值
  if (diskPrecent.value >= diskThreshold.value) {
    diskHealthColor.value = 'red'
    ElNotification({
      title: '警告',
      message: '硬盘使用率已达' + diskPrecent.value + '%,超过阈值',
      type: 'warning',
    })
  }
}
// 获取系统基本信息
const getSystemBaseInformation = async () => {
  try {// 发送请求获取系统基本信息
    const response = await apiClient.get("/monitor/baseInfo")
    if (response.data.code === 0) {
      ElMessage.error(response.data.message)
      return
    }
    // 更新系统指标数据
    let data = response.data.data
    console.log(data.system)
    let active_user_raised = data.active_user.today / data.active_user.yesterday - 1
    if (data.active_user.yesterday == 0) {
      active_user_raised = 0
    }
    systemMetrics.value = [
      {
        title: '系统运行时间',
        value: data.run_time.hours + '小时' + data.run_time.minutes + '分钟',
        change: '持续运行',
        icon: Clock,
        bgColorClass: 'bg-blue'
      },
      {
        title: '活跃用户',
        value: data.active_user.today,
        change: active_user_raised < 0 ? (active_user_raised) : ('+' + active_user_raised) + '%较昨日',
        icon: User,
        bgColorClass: 'bg-green'
      },
      {
        title: '房屋总数',
        value: data.house.house_count,
        change: '+' + data.house.raise_count + ' 新增',
        icon: House,
        bgColorClass: 'bg-purple'
      },
      {
        title: '系统告警',
        value: data.warning_count,
        change: '需要关注',
        icon: WarningFilled,
        bgColorClass: 'bg-yellow'
      }
    ]
    // 更新系统资源占有量
    cpuUsePrecent.value = data.system.cpu_percent
    memoryUsed.value = data.system.used_gb
    memoryTotal.value = data.system.total_gb
    diskUsed.value = data.system.used_disk_gb
    diskTotal.value = data.system.total_disk_gb
    memoryPrecent.value = Math.floor(memoryUsed.value / memoryTotal.value * 100)
    diskPrecent.value = Math.floor(diskUsed.value / diskTotal.value * 100)
    logRetention.value = data.log_remain_days
    checkThreshold()
  }
  catch (error) {
    console.log(error)
    ElMessage.error("获取系统基本信息失败")
  }
}
// 获取系统日志
const getSystemLogs = async () => {
  try {
    // 发送请求获取系统日志
    const response = await apiClient.get("/monitor/logs")
    if (response.data.code === 0) {
      ElMessage.error(response.data.message)
      return
    }
    // 更新系统日志数据
    let id = 0
    systemLogs.value = response.data.data.map((log) => {
      return {
        id: id++,
        level: log.level,
        message: log.message,
        time: log.time,
        detail: log.detail
      }
    });
    console.log(systemLogs.value)
  } catch (error) {
    console.log(error)
    ElMessage.error("获取系统日志失败")
  }
}
// 获取系统接口信息
const getSystemInterfaceInfo = async () => {
  try {
    // 发送请求获取系统接口信息
    const response = await apiClient.get("/monitor/interfaces")
    if (response.data.code === 0) {
      ElMessage.error(response.data.message)
      return
    }
    // 更新系统接口信息数据
    const data = response.data.data
    console.log(data)
    performanceData.value = data.interfaces
    availablePercent.value = data.right_percent
  }
  catch (error) {
    console.log(error)
    ElMessage.error("获取系统接口信息失败")
  }
}
// 获取系统有关的所有信息
const getSystemAllInfo = async () => {
  await getSystemBaseInformation()
  await getSystemLogs()
  await getSystemInterfaceInfo()
}
// 生命周期钩子
let updateTimeInterval
let getBaseInfoInterval
onMounted(() => {
  document.title = "系统监控"
  updateTime()
  updateTimeInterval = setInterval(updateTime, 1000)
  getSystemAllInfo()
  getBaseInfoInterval = setInterval(getSystemAllInfo, Number(autoRefreshInterval.value))
})

onUnmounted(() => {
  if (updateTimeInterval) {
    clearInterval(updateTimeInterval)
  }
  if (getBaseInfoInterval) {
    clearInterval(getBaseInfoInterval)
  }
})

// 日志下载弹窗相关参数
const logDialogVisible = ref(false)
// 示例文件列表数据
const fileList = ref([])
// 格式化文件大小
const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'

  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))

  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

// 下载单个文件
const downloadFile = async (file) => {
  file.downloading = true
  const encodedFilename = encodeURIComponent(file.name);
  const token = localStorage.getItem('token'); // 获取 token
  try {
    // 添加时间戳，确保每次请求的 URL 不同
    const timestamp = new Date().getTime();
    // 发送请求并设置 responseType 为 'blob'
    const response = await axios.get(
      `/api/monitor/logs/download/${encodedFilename}?t=${timestamp}`,
      {
        headers: {
          'Authorization': token
        },
        responseType: 'blob'  // 关键配置：接收二进制数据
      }
    );

    // 创建下载链接
    const url = window.URL.createObjectURL(new Blob([response.data]));
    const link = document.createElement('a');
    link.href = url;
    link.setAttribute('download', file.name);  // 使用原始文件名
    document.body.appendChild(link);
    link.click();

    // 清理资源
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);

    ElMessage.success(`${file.name} 下载成功`);
  } catch (error) {
    ElMessage.error(`${file.name} 下载失败`)
    console.error('下载错误:', error)
  } finally {
    file.downloading = false
  }

}
// 下载所有文件
const downloadAll = async () => {
  try {
    const result = await ElMessageBox.confirm(
      `确定要下载全部 ${fileList.value.length} 个文件吗？`,
      '批量下载确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    if (result === 'confirm') {
      for (const file of fileList.value) {
        await downloadFile(file)
        // 添加延迟避免同时下载太多文件
        await new Promise(resolve => setTimeout(resolve, 500))
      }
      ElMessage.success('所有文件下载完成')
    }
  } catch {
    // 用户取消下载
  }
}

// 刷新文件列表
const fecthFileList = async () => {
  console.log('刷新文件列表...')
  const res = await apiClient.get('/monitor/getLogFile')
  if (res.data.code === 0) {
    ElMessage.error(res.data.message)
    return
  }
  fileList.value = res.data.data.map((file) => {
    return {
      name: file.filename,
      size: file.size,
      downloading: false
    }
  })
}

// 关闭弹窗前的处理
const handleClose = (done) => {
  const hasDownloading = fileList.value.some(file => file.downloading)
  if (hasDownloading) {
    ElMessageBox.confirm('有文件正在下载，确定要关闭吗？')
      .then(() => {
        done()
      })
      .catch(() => {
        // 用户取消关闭
        console.log('用户取消关闭')
      })
  } else {
    done()
  }
}
</script>

<style>
/* 导入Element Plus样式 */
@import 'element-plus/dist/index.css';

.system-monitor {
  min-height: 100%;
  color: #1e3a8a;
}


.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.time-display {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3b82f6;
  font-size: 14px;
}

.system-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1e3a8a;
  font-size: 14px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background-color: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.main-container {
  padding: 20px;
}

.main-menu {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.content-area {
  margin-top: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 24px;
  font-weight: bold;
  color: #1e3a8a;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.log-filter {
  width: 150px;
}

.metric-cards {
  margin-bottom: 20px;
}

.metric-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #dbeafe;
}

.metric-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-info {
  flex: 1;
}

.metric-title {
  font-size: 14px;
  color: #3b82f6;
  margin: 0 0 8px 0;
}

.metric-value {
  font-size: 24px;
  font-weight: bold;
  color: #1e3a8a;
  margin: 0 0 4px 0;
}

.metric-change {
  font-size: 14px;
  color: #3b82f6;
  margin: 0;
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.bg-blue {
  background-color: #dbeafe;
  color: #3b82f6;
}

.bg-green {
  background-color: #d1fae5;
  color: #10b981;
}

.bg-purple {
  background-color: #ede9fe;
  color: #8b5cf6;
}

.bg-yellow {
  background-color: #fef3c7;
  color: #f59e0b;
}

.charts-row {
  margin-bottom: 20px;
}

.chart-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #dbeafe;
}

.chart-placeholder {
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f8fafc;
  border-radius: 8px;
}

.chart-icon {
  font-size: 48px;
  color: #3b82f6;
  margin-bottom: 16px;
}

.chart-text {
  color: #3b82f6;
  margin-bottom: 16px;
}

.logs-card {
  border-radius: 8px;
  border: 1px solid #dbeafe;
}

.log-level-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 auto;
}

.level-error {
  background-color: #ef4444;
}

.level-warning {
  background-color: #f59e0b;
}

.level-info {
  background-color: #10b981;
}

.error-row {
  background-color: #fee2e2;
}

.warning-row {
  background-color: #fef3c7;
}

.performance-card,
.health-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #dbeafe;
}

.health-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.health-text {
  color: #3b82f6;
  margin: 16px 0;
}

.health-stats {
  width: 100%;
  margin-top: 16px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stat-label {
  color: #3b82f6;
}

.stat-value {
  font-weight: bold;
  color: #1e3a8a;
}

.user-stats {
  margin-bottom: 20px;
}

.stat-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #dbeafe;
  text-align: center;
  padding: 20px;
}

.stat-icon {
  font-size: 32px;
  color: #3b82f6;
  margin-bottom: 16px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #1e3a8a;
  margin-bottom: 8px;
}

.stat-label {
  color: #3b82f6;
}

.activities-card {
  border-radius: 8px;
  border: 1px solid #dbeafe;
}

.user-avatar {
  background-color: #3b82f6;
  color: white;
}

.settings-card {
  height: 100%;
  border-radius: 8px;
  border: 1px solid #dbeafe;
  margin-bottom: 20px;
}

.threshold-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: #3b82f6;
  font-size: 14px;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tab-content {
  margin-bottom: 40px;
}

/*进度条样式*/
.progress-bar {
  width: 60%;
  height: 20px;
  background-color: #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #4299e1, #3182ce);
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill-memory {
  height: 100%;
  background: linear-gradient(90deg, #4299e1, #3182ce);
  border-radius: 10px;
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;
}

.progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    height: auto;
    padding: 10px;
  }

  .header-left,
  .header-right {
    width: 100%;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .header-actions {
    margin-top: 10px;
    width: 100%;
  }

  .log-filter {
    width: 100%;
  }
}

/*日志下载相关样式 */
.file-list-container {
  max-height: 500px;
}

.file-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #ebeef5;
}

.file-count {
  color: #606266;
  font-size: 14px;
}

.file-list {
  max-height: 400px;
  overflow-y: auto;
}

.file-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f7fa;
  transition: background-color 0.3s;
}

.file-item:hover {
  background-color: #f5f7fa;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 4px;
}

.file-item:last-child {
  border-bottom: none;
}

.file-info {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
}

.file-icon {
  font-size: 20px;
  color: #409eff;
  margin-right: 12px;
  flex-shrink: 0;
}

.file-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.file-name {
  font-weight: 500;
  color: #303133;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-size {
  font-size: 12px;
  color: #909399;
}

.file-actions {
  flex-shrink: 0;
  margin-left: 16px;
}

.empty-state {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .file-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .file-actions {
    margin-left: 0;
    align-self: flex-end;
  }

  .file-list-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>